<template>
	<view class="message-page">
		<!-- 顶部标签 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: formData.readStatus === 0 }" @click="switchTab(0)">
				未读
			</view>
			<view class="tab-item" :class="{ active: formData.readStatus === 1 }" @click="switchTab(1)">
				已读
			</view>
			<view class="mark-all" @click="markAllAsRead">
				全部标记已读
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="message-list">
			<view class="message-item" v-for="(item, index) in messageList" :key="index">
				<!-- <image class="message-icon" src="@/static/mine/message/message.png" mode="aspectFit"></image> -->
				<view class="message-content">
					<view class="message-title">{{ item.templateNickname }}</view>
					<view class="message-desc">{{ item.templateContent }}</view>
				</view>
				<view class="message-time">{{ item.createTime | formatTime }}</view>
				<text class="unread" v-if="!item.readStatus"></text>
			</view>
		</view>
		
		<!-- 数据为空 -->
		<view class="empty" v-if="messageList.length == 0">
			<u-empty mode="data"></u-empty>
		</view>
		
		<!-- 加载更多 -->
		<u-loadmore v-if="messageList && messageList.length > 0" :status="loadMoreStatus" />
	</view>
</template>

<script>
	import { formatWeChatTime } from '@/utils/index.js'
	export default {
		data() {
			return {
				currentTab: 'read',
				messageList: [], 
				formData: {
					pageNo: 1,
					pageSize: 15,
					readStatus: 0				,
				},
				isLoading: false,
				isFinished: false,
			}
		},
		onLoad() {
			this.list();
		},
		computed: {
			loadMoreStatus() {
				if (this.isLoading) return 'loading'
				if (this.isFinished) return 'nomore'
				return 'loadmore'
			}
		},
		methods: {
			list() {
				if (this.isFinished || this.isLoading) return
				this.isLoading = true
				this.$http_api.messageList(this.formData).then(res => {
					this.messageList = this.formData.pageNo === 1 ? res.list : [...this.messageList, ...res.list]
					this.isFinished = res.list.length < 15
					this.formData.pageNo++
				}).finally(() => {
					this.isLoading = false
				})
			},
			switchTab(tab) {
				this.isFinished = false;
				this.isLoading = false;
				this.messageList = [];
				this.formData.pageNo = 1;
				this.formData.readStatus = tab;
				this.list()
			},
			async markAllAsRead() {
				await this.$http_api.markerMessageReadStatus()
				this.messageList.map(item => item.readStatus = true);
				uni.$emit('messageReadEvent');
				uni.showToast({
					title: '已全部标记为已读',
					icon: 'none'
				});
			}
		},
		filters: {
			formatTime(time) {
				return formatWeChatTime(time)
			}
		}
	}
</script>

<style scoped lang="scss">
	.message-page {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.tab-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		position: relative;
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		
		.tab-item {
			padding: 0 20rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #666;
			position: relative;
			font-family: "PINGFANG";
			
			&.active {
				color: #42E0A2;
				
				&::after {
					content: '';
					position: absolute;
					bottom: -15rpx;
					left: 30rpx;
					width: 40rpx;
					height: 8rpx;
					background: #42E0A2;
					border-radius: 69rpx;
				}
			}
		}
		
		.mark-all {
			position: absolute;
			right: 30rpx;
			font-size: 26rpx;
			color: #666;
		}
	}

	.message-list {
		padding: 20rpx;
		
		.message-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			position: relative;
			
			.message-icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			
			.message-content {
				flex: 1;
				
				.message-title {
					font-size: 30rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 10rpx;
					font-family: "PINGFANG";
				}
				
				.message-desc {
					font-size: 22rpx;
					color: #999;
					font-family: "PINGFANG";
				}
			}
			
			.message-time {
				font-size: 22rpx;
				color: #AAA;
				font-weight: 400;
				font-family: "PINGFANG";
			}
		}
	}
	
	.unread {
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		width: 15rpx;
		height: 15rpx;
		background: #f40;
		border-radius: 100%;
	}
</style>